<template>
  <div class="login">
    <div class="return" @click="$router.back()">
      <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 48 48"
        fill="rgba(255, 255, 255, 1)">
        <path d="M0 0h48v48H0z" fill="none" />
        <path d="M40 22H15.66l11.17-11.17L24 8 8 24l16 16 2.83-2.83L15.66 26H40v-4z" />
      </svg>
    </div>
    <van-form @submit="onSubmit" input-align="center">
      <van-cell-group inset>
        <div class="box"><span class="iconfont icon-yonghu"></span> <van-field v-model="username" name="username"
            placeholder="账号" :rules="[{ required: true, message: '请填写账号' }]" /></div>
        <div class="box"><span class="iconfont icon-suoding"></span> <van-field v-model="password" type="password"
            name="password" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" /></div>
        <div class="box"><span class="iconfont icon-suoding"></span> <van-field v-model="rpassword" type="password"
            name="password" placeholder="确认密码" :rules="[{ required: true, message: '请填写确认密码' }]" /></div>
      </van-cell-group>
      <div class="button">
        <van-button round block type="primary" native-type="submit">
          确认注册
        </van-button>

      </div>
    </van-form>
  </div>

</template>

<script setup>
import { ref } from 'vue'
import { register } from '@/api/api'
import { showToast } from 'vant'
import router from '@/router'
const username = ref('');
const password = ref('');
const rpassword = ref('');
const onSubmit = async (values) => {
  if (password.value != rpassword.value) {
    return showToast({
      message: '两次密码不一致'
    })
  }
  let res = await register({ username: username.value, password: password.value })
  if (res.status == 200) {
    router.push('/login')
  } else if (res.status == 1) {
    showToast({
      message: '用户名已注册',
      position: 'top'
    })
  } else {
    showToast({
      message: '用户名只能为中文或英文',
      position: 'top'
    })
  }
}
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  background-size: 100%;


}

.login::after {
  content: "";
  background: url('@/images/cake01.jpg') no-repeat;
  background-size: 100%;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

.van-form {
  width: 80%;
  height: 20%;
  margin: 350px auto 0;
  // overflow: hidden;

  .van-cell-group {
    background-color: transparent;

    .box {
      margin-top: 20px;
    }

    .van-field {
      padding: 0;
      vertical-align: middle;
      border-radius: 15px;
      border: 0;
      width: 88%;
      display: inline-block;
      background-color: transparent;

      :deep(.van-field__body) {
        padding: 18px 0;
        border-radius: 15px;
        background-color: #fff;

      }

    }

    .icon-yonghu::before,
    .icon-suoding::before {
      font-size: 50px;
      color: white;

    }
  }


}

.button {
  margin-left: 60px;
  text-align: center;

}

.van-button {
  width: 86%;
  margin: 20px;
  display: inline-block;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 141, 26, 1);
  border-radius: 10px;
  border: 0;
}

.return {
  margin-left: 52px;
  margin-top: 41px;

  svg {
    width: 55px;
    height: 55px;
  }
}
</style>